<template>
    <div class="hello">
        <!--<button @click="limitClick(1)">点击设置上传数量：2</button>-->
        <!--<button @click="limitClick(0)">点击取消上传数量</button>-->
        <div class="upload">
            <div class="upload_warp">
                <div class="upload_warp_left" @click="fileClick">
                    <img src="./../../assets/food.png">
                </div>
                <!--<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">-->
                    <!--或者将文件拖到此处-->
                <!--</div>-->
            </div>
            <div class="upload_warp_text">
                选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
            </div>
            <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
            <div class="upload_warp_img" v-show="imgList.length!=0">
                <div class="upload_warp_img_div" v-for="(item,index) of imgList">
                    <div class="upload_warp_img_div_top">
                        <div class="upload_warp_img_div_text">
                            {{item.file.name}}
                        </div>
                        <img src="./../../assets/logo.png" class="upload_warp_img_div_del" @click="fileDel(index)">
                    </div>
                    <img :src="item.file.src">
                </div>
            </div>
        </div>

        <el-tree
                :data="data2"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps">
        </el-tree>

        <div class="buttons">
            <el-button @click="getCheckedNodes">通过 node 获取</el-button>
            <el-button @click="getCheckedKeys">通过 key 获取</el-button>
            <el-button @click="setCheckedNodes">通过 node 设置</el-button>
            <el-button @click="setCheckedKeys">通过 key 设置</el-button>
            <el-button @click="resetChecked">清空</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'hello',
        data() {
            return {
                imgList: [],
                size: 0,

                data2: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods: {
            //设置
//            limitClick(state) {
//                this.imgList = [];
//                if (state)
//                    this.limit = 2;
//                else
//                    this.limit = undefined;
//            },
            fileClick() {
                document.getElementById('upload_file').click()
            },
            fileChange(el) {
                if (!el.target.files[0].size) return;
                this.fileList(el.target);
                el.target.value = ''
            },
            fileList(fileList) {
                let files = fileList.files;
                for (let i = 0; i < files.length; i++) {
                    //判断是否为文件夹
                    if (files[i].type != '') {
                        this.fileAdd(files[i]);
                    } else {
                        //文件夹处理
                        this.folders(fileList.items[i]);
                    }
                }
            },
            //文件夹处理
            folders(files) {
                let _this = this;
                //判断是否为原生file
                if (files.kind) {
                    files = files.webkitGetAsEntry();
                }
                files.createReader().readEntries(function (file) {
                    for (let i = 0; i < file.length; i++) {
                        if (file[i].isFile) {
                            _this.foldersAdd(file[i]);
                        } else {
                            _this.folders(file[i]);
                        }
                    }
                })
            },
            foldersAdd(entry) {
                let _this = this;
                entry.file(function (file) {
                    _this.fileAdd(file)
                })
            },
            fileAdd(file) {
                if (this.limit !== undefined) this.limit--;
                if (this.limit !== undefined && this.limit < 0) return;
                //总大小
                this.size = this.size + file.size;
                //判断是否为图片文件
                if (file.type.indexOf('image') == -1) {
                    file.src = 'wenjian.png';
                    this.imgList.push({
                        file
                    });
                } else {
                    let reader = new FileReader();
                    reader.vue = this;
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        file.src = this.result;
                        this.vue.imgList.push({
                            file
                        });
                    }
                }
            },
            fileDel(index) {
                this.size = this.size - this.imgList[index].file.size;//总大小
                this.imgList.splice(index, 1);
                if (this.limit !== undefined) this.limit = this.imgList.length;
            },
            bytesToSize(bytes) {
                if (bytes === 0) return '0 B';
                let k = 1000, // or 1024
                    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                    i = Math.floor(Math.log(bytes) / Math.log(k));
                return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
            },
//            dragenter(el) {
//                el.stopPropagation();
//                el.preventDefault();
//            },
//            dragover(el) {
//                el.stopPropagation();
//                el.preventDefault();
//            },
//            drop(el) {
//                el.stopPropagation();
//                el.preventDefault();
//                this.fileList(el.dataTransfer);
//            }



            getCheckedNodes() {
                console.log(this.$refs.tree.getCheckedNodes());
            },
            getCheckedKeys() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            setCheckedNodes() {
                this.$refs.tree.setCheckedNodes([{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 9,
                    label: '三级 1-1-1'
                }]);
            },
            setCheckedKeys() {
                this.$refs.tree.setCheckedKeys([3]);
            },
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            }
        }
    }
</script>
<style scoped>
    .upload_warp_img_div_del {
        position: absolute;
        top: 6px;
        width: 16px;
        right: 4px;
    }
    .upload_warp_img_div_top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.4);
        line-height: 30px;
        text-align: left;
        color: #fff;
        font-size: 12px;
        text-indent: 4px;
    }
    .upload_warp_img_div_text {
        white-space: nowrap;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .upload_warp_img_div img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }
    .upload_warp_img_div {
        position: relative;
        height: 100px;
        width: 120px;
        border: 1px solid #ccc;
        margin: 0px 30px 10px 0px;
        float: left;
        line-height: 100px;
        display: table-cell;
        text-align: center;
        background-color: #eee;
        cursor: pointer;
    }
    .upload_warp_img {
        border-top: 1px solid #D2D2D2;
        padding: 14px 0 0 14px;
        overflow: hidden
    }
    .upload_warp_text {
        text-align: left;
        margin-bottom: 10px;
        padding-top: 10px;
        text-indent: 14px;
        border-top: 1px solid #ccc;
        font-size: 14px;
    }
    .upload_warp_right {
        float: left;
        width: 57%;
        margin-left: 2%;
        height: 100%;
        border: 1px dashed #999;
        border-radius: 4px;
        line-height: 130px;
        color: #999;
    }
    .upload_warp_left img {
        margin-top: 32px;
    }
    .upload_warp_left {
        float: left;
        width: 40%;
        height: 100%;
        border: 1px dashed #999;
        border-radius: 4px;
        cursor: pointer;
    }
    .upload_warp {
        margin: 14px;
        height: 130px;
    }
    .upload {
        border: 1px solid #ccc;
        background-color: #fff;
        width: 650px;
        box-shadow: 0px 1px 0px #ccc;
        border-radius: 4px;
    }
    .hello {
        width: 650px;
        margin-left: 34%;
    }
</style>



<!--<template>-->
    <!--<div>-->
        <!--<el-button>上传</el-button>-->
        <!--<vueshowpdf @closepdf="closepdf"-->
                    <!--v-show="isshowpdf"-->
                    <!--:pdfurl="pdfurls"-->
                    <!--@pdferr="pdferr"-->
                    <!--:maxscale='4'-->
                    <!--:minscale='0.6'-->
                    <!--:scale='1.1' >-->
        <!--</vueshowpdf>-->
    <!--</div>-->
<!--</template>-->

<!--<script type="text/ecmascript-6">-->
    <!--import vueshowpdf from 'vueshowpdf' ;-->
    <!--export default{-->
        <!--data(){-->
            <!--return {-->
                <!--pdfurls:'//cdn.mozilla.net/pdfjs/tracemonkey.pdf',-->
                <!--isshowpdf:false-->
            <!--}-->
        <!--},-->
        <!--methods: {-->
            <!--closepdf(){-->
                <!--this.isshowpdf = false-->
            <!--},-->
            <!--pdferr(errurl) {-->
                <!--console.log(errurl);-->
            <!--}-->
        <!--},-->
        <!--components:{-->
            <!--vueshowpdf-->
        <!--},-->
        <!--mounted: function () {   //  onload-->

        <!--}-->
    <!--}-->
<!--</script>-->
